<template>
	<div class="hello">
		<div class="banner">
			<ul>
				<li v-for="(item,index) in bannerList" :key="item.bannerId">
					<img :src="item.pic" alt=""  v-if="index===num">
				</li>
			</ul>
			<div class="left" @click="changeNum(1)">
				&lt;
			</div>
			<div class="right" @click="changeNum(0)">
				&gt;
			</div>
			<div>
				<span v-for="(item,index) in bannerList"  :key="item.bannerId" :class='index===num?"on":""'
				@click="num=index"
				>{{index+1}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				bannerList:[],
				num:0
			}
		},
		mounted() {
			// 为给定 ID 的 user 创建请求
			this.$http.get('/banner?type=2')
				.then(data=> {
					console.log(data);
					this.bannerList = data.data.banners
				})
		},
		methods:{
			changeNum(type){
				let len = this.bannerList.length
				if(type){
					this.num--
				}else{
					this.num++
				}
				this.num= (this.num+len)%len
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
	.on{
		color: red;
	}
</style>
